<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form action="" method="post">
      学号:<input type="text" id="sid" placeholder="请输入学号" /> <br />
      姓名:<input type="text" id="sname" placeholder="请输入姓名" /> <br />
      性别: <input type="radio" name="sex" id="boySex" value="男" checked />男
      <input type="radio" name="sex" id="girlSex" value="女" />女
      <input type="radio" name="sex" id="girlSex2" value="X" />X
      <input type="radio" name="sex" id="girlSex3" value="人妖" />人妖
      <input type="radio" name="sex" id="girlSex4" value="保密" />保密 <br />
      <button type="button" onclick="addStu()">新增</button>
      <button>删除选中</button>
    </form>
    <hr />
    <table border="1">
      <thead>
        <tr>
          <th><input type="checkbox" name="" id="" /></th>
          <th>学号</th>
          <th>姓名</th>
          <th>性别</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody id="stuDataList">
        <tr id="S1">
          <td><input type="checkbox" name="" id="" /></td>
          <td>S1</td>
          <td>张三</td>
          <td>男</td>
          <td>
            <a href="">查看/修改</a>
            <a href="javaScript:delStu('S1')">删除</a>
          </td>
        </tr>
        <tr id="S2">
          <td><input type="checkbox" name="" id="" /></td>
          <td>S2</td>
          <td>李四</td>
          <td>女</td>
          <td>
            <a href="">查看/修改</a>
            <a href="javaScript:delStu('S2')">删除</a>
          </td>
        </tr>
        <tr id="S3">
          <td><input type="checkbox" name="" id="" /></td>
          <td>S3</td>
          <td>王五</td>
          <td>男</td>
          <td>
            <a href="">查看/修改</a>
            <a href="javaScript:delStu('S3')">删除</a>
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
<script>
  //根据 id 删除功能
  function delStu(sid) {
    //通过 学号sid  获得 tr 元素
    var trDelComp = document.getElementById(sid)
    console.log('=============:' + trDelComp)
    //删除
    trDelComp.remove()
  }

  //新增功能
  function addStu() {
    //获得用户输入的学号
    var sid = document.getElementById('sid').value
    var sname = document.getElementById('sname').value
    var sex = document.querySelector(':checked').value
    console.log('用户输入的学号是:' + sid + ',姓名:' + sname + ',性别:' + sex)
    //创建元素
    var trComp = document.createElement('tr')
    //元素设置属性
    trComp.setAttribute('id', sid)
    //创建元素
    var td1Comp = document.createElement('td')
    var td1InputComp = document.createElement('input')
    td1InputComp.setAttribute('type', 'checkbox')
    //tr 添加 第一个 td
    trComp.appendChild(td1Comp)
    //第一个td 添加 input 复选框
    td1Comp.appendChild(td1InputComp)

    //创建元素
    var td2Comp = document.createElement('td')
    td2Comp.textContent = sid
    trComp.appendChild(td2Comp)

    //创建元素
    var td3Comp = document.createElement('td')
    td3Comp.textContent = sname
    trComp.appendChild(td3Comp)

    //创建元素
    var td4Comp = document.createElement('td')
    td4Comp.textContent = sex
    trComp.appendChild(td4Comp)

    //创建元素
    var td5Comp = document.createElement('td')
    var viewAComp = document.createElement('a')
    viewAComp.textContent = '查看/修改'
    viewAComp.setAttribute('href', '')
    var delAComp = document.createElement('a')
    delAComp.setAttribute('href', "javaScript:delStu('" + sid + "')")
    delAComp.textContent = '删除'

    td5Comp.appendChild(viewAComp)
    td5Comp.appendChild(delAComp)
    trComp.appendChild(td5Comp)
    //添加到 tbody中
    document.getElementById('stuDataList').appendChild(trComp)
  }
</script>
